<template>
  <!--我的订单-->
  <div class="orders">
      <div class="titleWrap">
        <p class="titleName">我的能力</p>
        <span class="pull-right font14"><span @click.stop.prevent="backablity" style="cursor: pointer">我的能力</span> > 能力雷达图</span>
      </div>
      <charts :val="leidaValue"></charts>
      <ul class="skillList">
        <li v-for="abi in abilityList"><img :src="abi.duanIcon"/><p>{{abi.abilityitem}}能力</p>{{duan(abi.duanName)}}</li>
      </ul>
      <!--<p class="commonTitle">企业评价</p>
      <span v-if="!evaList">
        <ul class="comnow">
          <li v-for="eva in evaList">
            <p>{{eva.content}}</p>
            <p class="comtimers">{{eva.createTime}}</p>
          </li>
        </ul>
       </span>
      <p v-else style="padding:15px 0">
        暂无企业测评
      </p>
      <div class="beforeList">
        <div class="clearfix histop">
          <p>教育经历</p>
        </div>
        <ul class="inforList font14">
          <li class="clearfix">
            <p class="listLeft">学校名称</p>
            &lt;!&ndash;<p class="listRight rightSet">{{education.schoolName}}  <span class="suretips" v-if="education.isEducation === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></span><span v-else class="suretips"><img src="../../assets/norenzheng.png" alt="" width="70" ></span></p>&ndash;&gt;
            <p class="listRight rightSet">{{education.schoolName}}  <span class="suretips" v-if="education.isEducation === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></span><span v-else class="suretips"><img src="../../assets/nopass.png" alt="" width="70" ></span></p>
          </li>
          <li class="clearfix">
            <p class="listLeft">就读时间</p>
            <p class="listRight">{{education.studyStartTime}}至{{education.studyEndTime}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">学历</p>
            <p class="listRight">{{education.education}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">专业</p>
            <p class="listRight">{{education.major}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">是否统招</p>
            <p class="listRight" v-if="education.unified === 1">是</p>
            <p class="listRight" v-else>否</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">证书编号</p>
            <p class="listRight">{{education.certificateNo}}</p>
          </li>
          <li>
            <img class="showimg" :src="education.academicImg"/>
          </li>
        </ul>
      </div>
      <div class="beforeList">
        <div class="clearfix histop">
          <p>工作经历</p>
        </div>
        <p v-if="works.length <= 0" style="margin:15px 0">暂无工作经历</p>
        <span v-else>
          <ul class="inforList font14" v-for="work in works">
            <li class="clearfix">
              <p class="listLeft">公司名称</p>
              &lt;!&ndash;<p class="listRight rightSet">{{work.companyName}}   <span class="suretips" v-if="work.isWork === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></span><span v-else class="suretips"><img src="../../assets/norenzheng.png" alt="" width="70" ></span></p>&ndash;&gt;
              <p class="listRight rightSet">{{work.companyName}}   <span class="suretips" v-if="work.isWork === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></span><span v-else class="suretips"><img src="../../assets/nopass.png" alt="" width="70" ></span></p>
            </li>
            <li class="clearfix">
              <p class="listLeft">职位名称</p>
              <p class="listRight">{{work.position}}</p>
            </li>
            <li class="clearfix">
              <p class="listLeft">业态</p>
              <p class="listRight">{{work.operationType}}</p>
            </li>
            <li class="clearfix">
              <p class="listLeft">在职时间</p>
              <p class="listRight">{{work.workingLife.text}}</p>
            </li>
            <li class="clearfix">
              <p class="listLeft">工作描述</p>
              <p class="listRight">{{work.workTask}}</p>
            </li>
          </ul>
          </span>
      </div>-->
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .titleWrap {
    height: 40px;
    font-size: 18px;
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 20px;
    color: #957960;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
      font-size: 14px;
    }
    .pull-right{
      /*font-size: 16px;*/
      color: #333;
    }
  }
  .suretips {
    display: inline-block;
    padding: 0 4px;
    height: 24px;
    /*background-color: #0a3c68;*/
    border-radius: 5px;
    color: #fff;
    text-align: center;
    img{
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  .skillList {
    display: inline-block;
    width: 90%;
    margin-top: 30px;
    li {
      display: inline-block;
      width: 33%;
      vertical-align: middle;
      text-align: center;
      margin-bottom: 15px;
      img {
        display: inline-block;
        height: 69px;
      }
      p {
        /*font-size: 16px;*/
        color: #333;
      }
    }
  }
  .commonTitle {
    font-size: 20px;
    color: #333;
    border-top: 1px solid #E1E1E1;
    padding-top: 20px;
  }
  .comnow {
    /*font-size: 16px;*/
    color: #333;
    li {
      padding: 15px 0;
      p {
        font-size: 14px;
        color: #333;
        line-height: 20px;
        text-align: left;
      }
      .comtimers {
        font-size: 14px;
        color: #515e6f;
        text-align: right;
        margin-top: 5px;
      }
    }
  }
  .beforeList {
    padding: 20px 0 0 0;
    border-top: 1px solid #E1E1E1;
    .renzheng{
      vertical-align: middle;
      margin-bottom: 2px;
      margin-left: 5px;
    }
    .inforList {
      padding: 20px 0;
      border-bottom: 1px solid #E1E1E1;
      li {
        margin-bottom: 15px;
        position: relative;
        .listLeft {
          /*font-size: 16px;*/
          color: #666;
          float: left;
        }
        .listRight {
          margin: 0 0 0 90px;
          padding: 0 20px 0 0;
          /*font-size: 16px;*/
          color: #333;
          line-height: 24px;
        }
        .showimg {
          display: block;
          width: 275px;
          height: 200px;
          overflow: hidden;
        }
      }
      li:last-child {
        margin-bottom: 0px;
      }
    }
    .inforList:last-child {
      border: none;
    }
    .histop p {
      font-size: 20px;
      color: #333;
      float: left;
      height: 36px;
      line-height: 36px;
    }
  }

</style>
<script type="text/ecmascript-6">
  import charts from '../template/chart'
  import {radarPage,centreInfoWeb} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
  import ablity from "./ablity";
  export default {
    name: 'orderdetail',
    props: {},
    data() {
      return {
        workScore:0,      //工作分
        studyScore:0,     //学历分
        works:'',         //工作经历
        evaList:'',       //企业评价
        education:'',     //教育经历
        abilityList:'',   //能力星级
        leidaValue:[],    //雷达图分值
        isSpinShow:false,
      };
    },
    methods: {
      //返回上级我的能力
      backablity(){
        this.$router.push({
          name:'ablity'
        })
      },
      duan(Name){
        return Name.substring(Name.length-2);
      },
      //雷达图分值
      getLeidaScore(list){
        let scores=new Array() ;
        let sa='';
        for(sa in list){
          scores.push(list[sa].rait);
        }
        return scores;
      },
      //雷达图数据整理
      getRaddar(arr){
        var newarr = new Array();
        var serarr = ["serve","manage","marketing","develop","maintain","finance"];
        for(let i = 0;i < serarr.length; i++){
          for(let j = 0;j < arr.length; j++){
            if(serarr[i] === arr[j].abilityitemCode){
              newarr.push(arr[j]);
              break;
            }
          }
        }
        return newarr;
      },
      //能力数据整理
      getAbilities(arr){
        var newarr = new Array();
        var serarr = ["serve","finance","maintain","develop","marketing","manage"];
        for(let i = 0;i < serarr.length; i++){
          for(let j = 0;j < arr.length; j++){
            if(serarr[i] === arr[j].abilityitemCode){
              newarr.push(arr[j]);
              break;
            }
          }
        }
        return newarr;
      },
      getAbiltyLeida(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //获取雷达图页面信息
              radarPage().then(res => {
                if(res.code === 200) {
                  this.isSpinShow = false;
                  this.workScore = res.data.workScore;
                  this.studyScore = res.data.studyScore;
                  // this.works = res.data.works;
                  // this.evaList = res.data.evaList;
                  // this.education = res.data.education;
                  this.abilityList = this.getAbilities(res.data.abilityList);
                  this.leidaValue = this.getLeidaScore(this.getRaddar(res.data.abilityList))
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "个人中心提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            }else {
              this.isSpinShow = false;
            }
          }).catch()
        }
      }
    },
    created() {
      this.getAbiltyLeida()
    },
    components: {
      charts
    }
  }
</script>
